Είναι δυνατή η εναλλαγή της ορατότητας ενός στοιχείου, χρησιμοποιώντας τις συναρτήσεις .hide (), .show () ή .toggle ();
Πώς θα εξετάζατε εάν ένα στοιχείο είναι ορατό ή κρυφό;
2020-12-07 21:52:48
1
2
Επόμενο
Δεδομένου ότι η ερώτηση αναφέρεται σε ένα μόνο στοιχείο, αυτός ο κωδικός μπορεί να είναι πιο κατάλληλος:
// Ελέγχει το περιεχόμενο CSS για προβολή: [none | block], αγνοεί την ορατότητα: [true | false]
$ (στοιχείο) .is (": ορατό");
// Το ίδιο λειτουργεί με κρυφό
$ (στοιχείο) .is (": κρυφό");
Είναι το ίδιο με την πρόταση του twernt, αλλά εφαρμόζεται σε ένα μόνο στοιχείο. και ταιριάζει με τον αλγόριθμο που συνιστάται στις ερωτήσεις jQuery.
Χρησιμοποιούμε το jQuery's () για να ελέγξουμε το επιλεγμένο στοιχείο με άλλο στοιχείο, επιλογέα ή οποιοδήποτε αντικείμενο jQuery. Αυτή η μέθοδος διασχίζει τα στοιχεία DOM για να βρει μια αντιστοίχιση, η οποία ικανοποιεί την παράμετρο που έχει περάσει. Θα επιστρέψει αληθινό εάν υπάρχει αντιστοιχία, διαφορετικά επιστρέφει ψευδές.
|
Μπορείτε να χρησιμοποιήσετε τον κρυφό επιλογέα:
// Ταιριάζει με όλα τα στοιχεία που είναι κρυμμένα
$ ('στοιχείο: κρυφό')
Και ο ορατός επιλογέας:
// Ταιριάζει με όλα τα στοιχεία που είναι ορατά
$ ('στοιχείο: ορατό')
|
if ($ (element) .css ('display') == 'none' || $ (element) .css ("ορατότητα") == "κρυφό") {
// Το "στοιχείο" είναι κρυφό
}
Η παραπάνω μέθοδος δεν λαμβάνει υπόψη την ορατότητα του γονέα. Για να θεωρήσετε και τον γονέα, πρέπει να χρησιμοποιήσετε το .is (": hidden") ή το .is (": visible").
Για παράδειγμα,
Div2
Η παραπάνω μέθοδος θα θεωρήσει το div2 ορατό ενώ: ορατό όχι. Ωστόσο, τα παραπάνω μπορεί να είναι χρήσιμα σε πολλές περιπτώσεις, ειδικά όταν πρέπει να βρείτε εάν υπάρχουν ορατά σφάλματα div στο κρυφό γονέα, επειδή σε τέτοιες συνθήκες: ορατό δεν θα λειτουργήσει.
|
Καμία από αυτές τις απαντήσεις δεν αναφέρεται σε αυτό που καταλαβαίνω ότι είναι η ερώτηση, που είναι αυτό που έψαχνα, "Πώς μπορώ να χειριστώ στοιχεία που έχουν ορατότητα: κρυφό;". Ούτε: ορατό ούτε: κρυμμένο θα το χειριστεί, καθώς και οι δύο αναζητούν εμφάνιση ανά τεκμηρίωση. Από όσο μπορώ να προσδιορίσω, δεν υπάρχει επιλογέας που να χειρίζεται την ορατότητα CSS Εδώ είναι πώς το έλυσα (τυπικοί επιλογείς jQuery, μπορεί να υπάρχει μια πιο συμπυκνωμένη σύνταξη):
$ (". item"). κάθε (συνάρτηση () {
if ($ (this) .css ("visibility") == "κρυφό") {
// χειρισμός μη ορατής κατάστασης
} αλλιώς {
// χειριστείτε την ορατή κατάσταση
}
});
|
Από Πώς μπορώ να προσδιορίσω την κατάσταση ενός εναλλαγμένου στοιχείου;
Μπορείτε να προσδιορίσετε εάν ένα στοιχείο έχει καταρρεύσει ή όχι χρησιμοποιώντας τους: ορατούς και: κρυμμένους επιλογείς.
var isVisible = $ ('# myDiv'). είναι (': ορατό');
var isHidden = $ ('# myDiv'). είναι (': κρυφό');
Εάν απλώς ενεργείτε σε ένα στοιχείο βάσει της ορατότητάς του, μπορείτε απλώς να συμπεριλάβετε: ορατό ή: κρυμμένο στην έκφραση επιλογέα. Για παράδειγμα:
$ ('# myDiv: visible'). animate ({αριστερά: '+ = 200px'}, 'αργό');
|
Συχνά όταν ελέγχετε αν κάτι είναι ορατό ή όχι, πρόκειται να προχωρήσετε αμέσως μπροστά και να κάνετε κάτι άλλο μαζί του. Η αλυσίδα jQuery το καθιστά εύκολο.
Έτσι, εάν έχετε έναν επιλογέα και θέλετε να εκτελέσετε κάποια ενέργεια σε αυτό μόνο εάν είναι ορατό ή κρυφό, μπορείτε να χρησιμοποιήσετε το φίλτρο (": ορατό") ή το φίλτρο (": κρυφό") ακολουθούμενο από το αλυσοδεμένο με την ενέργεια που θέλετε παίρνω.
Έτσι, αντί για δήλωση if, όπως αυτό:
if ($ ('# btnUpdate'). είναι (": ορατό"))
{
$ ('# btnUpdate'). animate ({width: "toggle"}); // Απόκρυψη κουμπιού
}
Ή πιο αποτελεσματικό, αλλά ακόμη πιο άσχημο:
κουμπί var = $ ('# btnUpdate');
εάν (button.is (": ορατό"))
{
button.animate ({πλάτος: "toggle"}); // Απόκρυψη κουμπιού
}
Μπορείτε να τα κάνετε όλα σε μία γραμμή:
$ ('# btnUpdate'). filter (": visible"). animate ({width: "toggle"});
|
Ο: ορατός επιλογέας σύμφωνα με την τεκμηρίωση jQuery:
Έχουν καμία τιμή εμφάνισης CSS.
Είναι στοιχεία μορφής με τύπο = "κρυφό".
Το πλάτος και το ύψος τους ορίζονται ρητά στο 0.
Ένα στοιχείο προγόνων είναι κρυμμένο, επομένως το στοιχείο δεν εμφανίζεται στη σελίδα.
Στοιχεία με ορατότητα: κρυφό ή αδιαφάνεια: 0 θεωρούνται ορατά, καθώς εξακολουθούν να καταναλώνουν χώρο στη διάταξη.
Αυτό είναι χρήσιμο σε ορισμένες περιπτώσεις και άχρηστο σε άλλες, γιατί αν θέλετε να ελέγξετε αν το στοιχείο είναι ορατό (οθόνη! = Κανένα), αγνοώντας την ορατότητα των γονέων, θα διαπιστώσετε ότι κάνει .css ("display") == «δεν είναι μόνο πιο γρήγορο, αλλά θα επιστρέψει επίσης τον έλεγχο ορατότητας σωστά.
Εάν θέλετε να ελέγξετε την ορατότητα αντί της οθόνης, θα πρέπει να χρησιμοποιήσετε: .css ("visibility") == "κρυφό".
Λάβετε επίσης υπόψη τις πρόσθετες σημειώσεις jQuery:
Επειδή: ορατό είναι μια επέκταση jQuery και δεν αποτελεί μέρος της προδιαγραφής CSS, τα ερωτήματα που χρησιμοποιούν: visible δεν μπορούν να επωφεληθούν από την ενίσχυση απόδοσης που παρέχεται από την εγγενή μέθοδο DOM querySelectorAll () Για να επιτύχετε την καλύτερη απόδοση κατά τη χρήση: ορατό σε επιλεγμένα στοιχεία, επιλέξτε πρώτα τα στοιχεία χρησιμοποιώντας έναν καθαρό επιλογέα CSS και, στη συνέχεια, χρησιμοποιήστε το .filter (": visible").
Επίσης, εάν ανησυχείτε για την απόδοση, θα πρέπει να ελέγξετε Τώρα με βλέπετε… εμφάνιση / απόκρυψη απόδοσης (2010-05-04). Και χρησιμοποιήστε άλλες μεθόδους για την εμφάνιση και απόκρυψη στοιχείων.
|
Αυτό λειτουργεί για μένα και χρησιμοποιώ το show () και το hide () για να κάνω το div μου κρυφό / ορατό:
if ($ (this) .css ('display') == 'none') {
/ * ο κωδικός σας πηγαίνει εδώ * /
} αλλιώς {
/ * εναλλακτική λογική * /
}
|
Πώς λειτουργεί η ορατότητα και το jQuery;
Ένα στοιχείο θα μπορούσε να κρυφτεί με οθόνη: κανένα,ορατότητα: κρυφό ή αδιαφάνεια: 0. Η διαφορά μεταξύ αυτών των μεθόδων:
οθόνη: κανένας δεν κρύβει το στοιχείο και δεν καταλαμβάνει χώρο.
ορατότητα: κρυφό κρύβει το στοιχείο, αλλά εξακολουθεί να καταλαμβάνει χώρο στη διάταξη.
αδιαφάνεια: 0 αποκρύπτει το στοιχείο ως "ορατότητα: κρυφό" και εξακολουθεί να καταλαμβάνει χώρο στη διάταξη. η μόνη διαφορά είναι ότι η αδιαφάνεια επιτρέπει σε κάποιον να κάνει ένα στοιχείο εν μέρει διαφανές.
if ($ ('. target'). είναι (': κρυφό')) {
$ ('. target'). εμφάνιση ();
} αλλιώς {
$ ('. target'). απόκρυψη ();
}
if ($ ('. target'). είναι (': ορατό')) {
$ ('. target'). απόκρυψη ();
} αλλιώς {
$ ('. target'). εμφάνιση ();
}
if ($ ('. target-visibility'). css ('visibility') == "κρυφό") {
$ ('. target-visibility'). css ({
ορατότητα: "ορατό",
απεικόνιση: ""
});
} αλλιώς {
$ ('. target-visibility'). css ({
ορατότητα: "κρυφό",
απεικόνιση: ""
});
}
if ($ ('. target-visibility'). css ('opacity') == "0") {
$ ('. target-visibility'). css ({
αδιαφάνεια: "1",
απεικόνιση: ""
});
} αλλιώς {
$ ('. target-visibility'). css ({
αδιαφάνεια: "0",
απεικόνιση: ""
});
}
Χρήσιμες μέθοδοι εναλλαγής jQuery:
$ ('. click'). click (function () {
$ ('. target'). εναλλαγή ();
});
$ ('. click'). click (function () {
$ ('. target'). slideToggle ();
});
$ ('. click'). click (function () {
$ ('. target'). fadeToggle ();
});
|
Μπορείτε επίσης να το κάνετε χρησιμοποιώντας απλή JavaScript:
η συνάρτηση isRendered (domObj) {
εάν ((domObj.nodeType! = 1) || (domObj == document.body)) {
επιστροφή αληθινή?
}
if (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["ορατότητα"]! = "κρυφό") {
return isRendered (domObj.parentNode);
} αλλιώς εάν (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("ορατότητα")! = "κρυφό") {
return isRendered (domObj.parentNode);
}
}
επιστροφή ψευδής?
}
Σημειώσεις:
Λειτουργεί παντού
Λειτουργεί για ένθετα στοιχεία
Λειτουργεί για CSS και ενσωματωμένα στυλ
Δεν απαιτεί πλαίσιο
|
Θα χρησιμοποιούσα CSS class .hide {display: none! Σημαντικό }
Για απόκρυψη / εμφάνιση, καλώ το .addClass ("απόκρυψη") /. RemoveClass ("απόκρυψη"). Για τον έλεγχο της ορατότητας, χρησιμοποιώ το .hasClass ("απόκρυψη").
Είναι ένας απλός και σαφής τρόπος για τον έλεγχο / απόκρυψη / εμφάνιση στοιχείων, εάν δεν σκοπεύετε να χρησιμοποιήσετε μεθόδους .toggle () ή .animate ().
|
Σύνδεσμος επίδειξης
$ ('# clickme'). κλικ (λειτουργία () {
$ ('# βιβλίο'). εναλλαγή ('αργή', συνάρτηση () {
// Η κινούμενη εικόνα ολοκληρώθηκε.
ειδοποίηση ($ ('# βιβλίο'). είναι (": ορατό")); // <--- ΑΛΗΘΕΙΑ εάν ορατό Λάθος εάν είναι κρυφό
});
});
Κάντε κλικ ΕΔΩ
Πηγή:
Blogger Plug n Play - jQuery Εργαλεία και Widgets: Πώς να δείτε αν το στοιχείο είναι κρυφό ή ορατό χρησιμοποιώντας το jQuery
|
Κάποιος μπορεί απλά να χρησιμοποιήσει το κρυφό ή ορατό χαρακτηριστικό, όπως:
$ ('στοιχείο: κρυφό')
$ ('στοιχείο: ορατό')
Ή μπορείτε να απλοποιήσετε το ίδιο με το εξής.
$ (στοιχείο) .is (": ορατό")
|
Το ebdiv πρέπει να ρυθμιστεί σε style = "display: none;". Λειτουργεί τόσο για την εμφάνιση όσο και για την απόκρυψη:
$ (έγγραφο). ήδη (συνάρτηση () {
$ ("# eb"). κάντε κλικ στο (function () {
$ ("# ebdiv"). εναλλαγή ();
});
});
|
Μια άλλη απάντηση που πρέπει να λάβετε υπόψη είναι εάν κρύβετε ένα στοιχείο, πρέπει να χρησιμοποιήσετε το jQuery, αλλά αντί να το αποκρύψετε, καταργείτε ολόκληρο το στοιχείο, αλλά αντιγράφετε το περιεχόμενο HTML και την ίδια την ετικέτα σε μια μεταβλητή jQuery το μόνο που χρειάζεται να κάνετε είναι να ελέγξετε εάν υπάρχει τέτοια ετικέτα στην οθόνη, χρησιμοποιώντας το κανονικό if (! $ ('# thetagname'). length).
|
Κατά τη δοκιμή ενός στοιχείου εναντίον: κρυφό επιλογέα στο jQuery, θα πρέπει να θεωρείται ότι ένα απόλυτο τοποθετημένο στοιχείο μπορεί να αναγνωριστεί ως κρυφό, αν και τα θυγατρικά στοιχεία τους είναι ορατά.
Αυτό φαίνεται κάπως αντιδιαισθητικό - αν και με μια πιο προσεκτική ματιά στην τεκμηρίωση του jQuery παρέχονται οι σχετικές πληροφορίες:
Τα στοιχεία μπορούν να θεωρηθούν κρυμμένα για διάφορους λόγους: [...] Το πλάτος και το ύψος τους ορίζονται ρητά σε 0. [...]
Αυτό λοιπόν έχει νόημα όσον αφορά το μοντέλο κουτιού και το υπολογιστικό στυλ για το στοιχείο. Ακόμα κι αν το πλάτος και το ύψος δεν έχουν οριστεί ρητά στο 0, μπορούν να ρυθμιστούν έμμεσα.
Ρίξτε μια ματιά στο ακόλουθο παράδειγμα:
console.log ($ ('. foo'). is (': hidden')); // αλήθεια
console.log ($ ('. bar'). is (': hidden')); // ψευδές
.foo {
θέση: απόλυτη;
αριστερά: 10px;
κορυφή: 10px;
φόντο: # ff0000;
}
.μπαρ {
θέση: απόλυτη;
αριστερά: 10px;
κορυφή: 10px;
πλάτος: 20px;
ύψος: 20px;
φόντο: # 0000ff;
}
Ενημέρωση για το jQuery 3.x:
Με το jQuery 3 η περιγραφόμενη συμπεριφορά θα αλλάξει! Τα στοιχεία θα θεωρηθούν ορατά εάν έχουν κιβώτια διάταξης, συμπεριλαμβανομένων εκείνων με μηδενικό πλάτος ή / και ύψος.
JSFiddle με jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Ο ίδιος κώδικας JavaScript θα έχει στη συνέχεια αυτήν την έξοδο:
console.log ($ ('. foo'). is (': hidden')); // ψευδές
console.log ($ ('. bar'). is (': hidden'));// ψευδές
|
Αυτό μπορεί να λειτουργήσει:
περιμένετε ($ ("# message_div"). css ("display")). toBe ("none");
|
Παράδειγμα:
$ (έγγραφο). ήδη (συνάρτηση () {
if ($ ("# checkme: hidden"). μήκος) {
console.log ("Κρυφό");
}
});
|
Για να ελέγξω αν δεν είναι ορατό χρησιμοποιώ!:
αν (! $ ('# βιβλίο'). είναι (': ορατό')) {
ειδοποίηση ("# το βιβλίο δεν είναι ορατό")
}
Ή το παρακάτω είναι επίσης το sam, αποθηκεύοντας τον επιλογέα jQuery σε μια μεταβλητή για να έχετε καλύτερη απόδοση όταν το χρειάζεστε πολλές φορές:
var $ book = $ ('# βιβλίο')
αν (! $ book.is (': visible')) {
ειδοποίηση ("# το βιβλίο δεν είναι ορατό")
}
|
Χρησιμοποιήστε εναλλαγή τάξης και όχι επεξεργασία στυλ. . .
Η χρήση τάξεων που προορίζονται για "απόκρυψη" στοιχείων είναι εύκολη και επίσης μία από τις πιο αποτελεσματικές μεθόδους. Η εναλλαγή μιας κατηγορίας "κρυμμένη" με ένα στυλ εμφάνισης "κανένας" θα έχει ταχύτερη απόδοση από την άμεση επεξεργασία αυτού του στυλ. Εξήγησα μερικά από αυτά αρκετά καλά στην ερώτηση Stack Overflow Γυρίζοντας δύο στοιχεία ορατά / κρυμμένα στο ίδιο div.
Βέλτιστες πρακτικές και βελτιστοποίηση JavaScript
Εδώ είναι ένα πραγματικά διαφωτιστικό βίντεο μιας τεχνολογίας Google Talk από τον μηχανικό front-end της Google, Nicholas Zakas:
Επιταχύνετε το JavaScript σας (YouTube)
|
Ενεργοποιείται το παράδειγμα χρήσης του ορατού ελέγχου για το adblocker:
$ (έγγραφο). ήδη (συνάρτηση () {
if (! $ ("# ablockercheck"). είναι (": ορατό"))
$ ("# ablockermsg"). κείμενο ("Απενεργοποιήστε το adblocker."). εμφάνιση ();
});
Το "ablockercheck" είναι ένα αναγνωριστικό που αποκλείει το adblocker. Επομένως, αν το ελέγξετε αν είναι ορατό, μπορείτε να εντοπίσετε εάν το πρόγραμμα adblocker είναι ενεργοποιημένο
|
Μετά από όλα, κανένα από τα παραδείγματα δεν μου ταιριάζει, γι 'αυτό έγραψα το δικό μου.
Δοκιμές (χωρίς υποστήριξη φίλτρου Internet Explorer: alpha):
α) Ελέγξτε εάν το έγγραφο δεν είναι κρυμμένο
β) Ελέγξτε εάν ένα στοιχείο έχει μηδενικό πλάτος / ύψος / αδιαφάνεια ή οθόνη: κανένα / ορατότητα: κρυμμένο σε ενσωματωμένα στυλ
γ) Ελέγξτε εάν το κέντρο (επίσης επειδή είναι ταχύτερο από τη δοκιμή κάθε εικονοστοιχείου / γωνίας) του στοιχείου δεν κρύβεται από άλλο στοιχείο (και από όλους τους προγόνους, παράδειγμα: υπερχείλιση: κρυφό / κύλιση / ένα στοιχείο πάνω από ένα άλλο) ή άκρες οθόνης
δ) Ελέγξτε εάν ένα στοιχείο έχει μηδενικό πλάτος / ύψος / αδιαφάνεια ή οθόνη: κανένα / ορατότητα: κρυμμένο σε υπολογιστικά στυλ (μεταξύ όλων των προγόνων)
Δοκιμάστηκε στις
Android 4.4 (εγγενές πρόγραμμα περιήγησης / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (λειτουργίες εγγράφων Internet Explorer 5-11 + Internet Explorer 8 σε ένα εικονική μηχανή) και Safari (Windows / Mac / iOS).
var is_visible = (συνάρτηση () {
var x = window.pageXOffset; window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset; window.pageYOffset + window.innerHeight - 1: 0,
σχετικός = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
λειτουργία μέσα (παιδί, γονέας) {
ενώ (παιδί) {
εάν (παιδί === γονέας) επιστρέψει true;
child = child.parentNode;
}
επιστροφή ψευδής?
};
συνάρτηση επιστροφής (elem) {
αν (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == "κρυφό" ||
elem.style.display == "κανένας" ||
elem.style.opacity === 0
) επιστροφή ψευδής
var rect = elem.getBoundingClientRect ();
εάν (σχετικός) {
εάν (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) επιστροφή false
} αλλιώς εάν (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) επιστροφή ψευδής
εάν (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = μηδέν;
ενώ (el) {
if (el === document) {break;} αλλιώς εάν (! el.parentNode) επιστρέψει false;
comp = window.getComputedStyle; window.getComputedStyle (el, null): el.currentStyle;
αν (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) επιστροφή false
el = el.parentNode;
}
}
επιστροφή αληθινή?
}
}) ();
Τρόπος χρήσης:
is_visible (elem) // boolean
|
Πρέπει να ελέγξετε και τα δύο ... Οθόνη καθώς και ορατότητα:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "κρυφό") {
// Το στοιχείο δεν είναι ορατό
} αλλιώς {
// Το στοιχείο είναι ορατό
}
Εάν ελέγξουμε για $ (this) .is (": visible"), το jQuery ελέγχει και τα δύο πράγματα αυτόματα.
|
Ίσως μπορείτε να κάνετε κάτι τέτοιο
$ (έγγραφο). ήδη (συνάρτηση () {
var ορατό =$ ('# tElement'). είναι (': ορατό');
εάν (ορατό) {
προειδοποίηση ("ορατό") ·
// Κωδικός
}
αλλού
{
ειδοποίηση ("κρυφό") ·
}
});
Όνομα
|
Απλώς ελέγξτε την ορατότητα ελέγχοντας μια δυαδική τιμή, όπως:
εάν (this.hidden === false) {
// Ο κωδικός σου
}
Χρησιμοποίησα αυτόν τον κωδικό για κάθε λειτουργία. Διαφορετικά, μπορείτε να χρησιμοποιήσετε είναι (': ορατό') για τον έλεγχο της ορατότητας ενός στοιχείου.
|
Επειδή τα στοιχεία με ορατότητα: κρυφό ή αδιαφάνεια: 0 θεωρούνται ορατά, καθώς εξακολουθούν να καταναλώνουν χώρο στη διάταξη (όπως περιγράφεται για το jQuery: visible Selector) - μπορούμε να ελέγξουμε εάν το στοιχείο είναι πραγματικά ορατό με αυτόν τον τρόπο:
η συνάρτηση isElementReallyHidden (el) {
επιστροφή $ (el) .is (": κρυφό") || $ (el) .css ("ορατότητα") == "κρυφό" || $ (el) .css ('αδιαφάνεια') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl). γονείς (). κάθε (συνάρτηση () {
εάν (isElementReallyHidden (αυτό)) {
booElementReallyShowed = false;
}
});
|
Τι γίνεται όμως αν το CSS του στοιχείου είναι το ακόλουθο;
.στοιχείο{
θέση: απόλυτη, αριστερά: -9999;
}
Έτσι, αυτή η απάντηση στην ερώτηση Stack Overflow Πώς να ελέγξετε εάν ένα στοιχείο είναι εκτός οθόνης θα πρέπει επίσης να ληφθεί υπόψη.
|
Μια συνάρτηση μπορεί να δημιουργηθεί προκειμένου να ελέγξει για ορατότητα / χαρακτηριστικά εμφάνισης προκειμένου να εκτιμηθεί εάν το στοιχείο εμφανίζεται στο περιβάλλον χρήστη ή όχι.
function checkUIElementVisible (στοιχείο) {
επιστροφή ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'κρυφό'));
}
Εργασία Fiddle
|
Επίσης, εδώ είναι μια τριμερής υπό όρους έκφραση για να ελέγξετε την κατάσταση του στοιχείου και στη συνέχεια να το αλλάξετε:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle "). show (" αργό ");});
|
if ($ ('# postcode_div'). είναι (': ορατό')) {
εάν ($ ('# postcode_text'). val () == ") {
$ ('# spanPost'). κείμενο ('\ u00a0');
} αλλιώς {
$ ('# spanPost'). κείμενο ($ ('# postcode_text'). val ());
}
|
1
2
Επόμενο
Πολύ ενεργή ερώτηση. Κερδίστε 10 φήμη για να απαντήσετε σε αυτήν την ερώτηση. Η απαίτηση φήμης συμβάλλει στην προστασία αυτής της ερώτησης από ανεπιθύμητες ενέργειες και μη απαντήσεις.
Δεν είναι η απάντηση που ψάχνετε; Περιηγηθείτε σε άλλες ερωτήσεις με ετικέτα javascript jquery dom visibility ή κάντε τη δική σας ερώτηση.
Πηγή:
Blogger Plug n Play - jQuery Εργαλεία και Widgets: Πώς να δείτε αν το στοιχείο είναι κρυφό ή ορατό χρησιμοποιώντας το jQuery
|
Κάποιος μπορεί απλά να χρησιμοποιήσει το κρυφό ή ορατό χαρακτηριστικό, όπως:
$ ('στοιχείο: κρυφό')
$ ('στοιχείο: ορατό')
Ή μπορείτε να απλοποιήσετε το ίδιο με το εξής.
$ (στοιχείο) .is (": ορατό")
|
Το ebdiv πρέπει να ρυθμιστεί σε style = "display: none;". Λειτουργεί τόσο για την εμφάνιση όσο και για την απόκρυψη:
$ (έγγραφο). ήδη (συνάρτηση () {
$ ("# eb"). κάντε κλικ στο (function () {
$ ("# ebdiv"). εναλλαγή ();
});
});
|
Μια άλλη απάντηση που πρέπει να λάβετε υπόψη είναι εάν κρύβετε ένα στοιχείο, πρέπει να χρησιμοποιήσετε το jQuery, αλλά αντί να το αποκρύψετε, καταργείτε ολόκληρο το στοιχείο, αλλά αντιγράφετε το περιεχόμενο HTML και την ίδια την ετικέτα σε μια μεταβλητή jQuery το μόνο που χρειάζεται να κάνετε είναι να ελέγξετε εάν υπάρχει τέτοια ετικέτα στην οθόνη, χρησιμοποιώντας το κανονικό if (! $ ('# thetagname'). length).
|
Κατά τη δοκιμή ενός στοιχείου εναντίον: κρυφό επιλογέα στο jQuery, θα πρέπει να θεωρείται ότι ένα απόλυτο τοποθετημένο στοιχείο μπορεί να αναγνωριστεί ως κρυφό, αν και τα θυγατρικά στοιχεία τους είναι ορατά.
Αυτό φαίνεται κάπως αντιδιαισθητικό - αν και με μια πιο προσεκτική ματιά στην τεκμηρίωση του jQuery παρέχονται οι σχετικές πληροφορίες:
Τα στοιχεία μπορούν να θεωρηθούν κρυμμένα για διάφορους λόγους: [...] Το πλάτος και το ύψος τους ορίζονται ρητά σε 0. [...]
Αυτό λοιπόν έχει νόημα όσον αφορά το μοντέλο κουτιού και το υπολογιστικό στυλ για το στοιχείο. Ακόμα κι αν το πλάτος και το ύψος δεν έχουν οριστεί ρητά στο 0, μπορούν να ρυθμιστούν έμμεσα.
Ρίξτε μια ματιά στο ακόλουθο παράδειγμα:
console.log ($ ('. foo'). is (': hidden')); // αλήθεια
console.log ($ ('. bar'). is (': hidden')); // ψευδές
.foo {
θέση: απόλυτη;
αριστερά: 10px;
κορυφή: 10px;
φόντο: # ff0000;
}
.μπαρ {
θέση: απόλυτη;
αριστερά: 10px;
κορυφή: 10px;
πλάτος: 20px;
ύψος: 20px;
φόντο: # 0000ff;
}
Ενημέρωση για το jQuery 3.x:
Με το jQuery 3 η περιγραφόμενη συμπεριφορά θα αλλάξει! Τα στοιχεία θα θεωρηθούν ορατά εάν έχουν κιβώτια διάταξης, συμπεριλαμβανομένων εκείνων με μηδενικό πλάτος ή / και ύψος.
JSFiddle με jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Ο ίδιος κώδικας JavaScript θα έχει στη συνέχεια αυτήν την έξοδο:
console.log ($ ('. foo'). is (': hidden')); // ψευδές
console.log ($ ('. bar'). is (': hidden'));// ψευδές
|
Αυτό μπορεί να λειτουργήσει:
περιμένετε ($ ("# message_div"). css ("display")). toBe ("none");
|
Παράδειγμα:
$ (έγγραφο). ήδη (συνάρτηση () {
if ($ ("# checkme: hidden"). μήκος) {
console.log ("Κρυφό");
}
});
|
Για να ελέγξω αν δεν είναι ορατό χρησιμοποιώ!:
αν (! $ ('# βιβλίο'). είναι (': ορατό')) {
ειδοποίηση ("# το βιβλίο δεν είναι ορατό")
}
Ή το παρακάτω είναι επίσης το sam, αποθηκεύοντας τον επιλογέα jQuery σε μια μεταβλητή για να έχετε καλύτερη απόδοση όταν το χρειάζεστε πολλές φορές:
var $ book = $ ('# βιβλίο')
αν (! $ book.is (': visible')) {
ειδοποίηση ("# το βιβλίο δεν είναι ορατό")
}
|
Χρησιμοποιήστε εναλλαγή τάξης και όχι επεξεργασία στυλ. . .
Η χρήση τάξεων που προορίζονται για "απόκρυψη" στοιχείων είναι εύκολη και επίσης μία από τις πιο αποτελεσματικές μεθόδους. Η εναλλαγή μιας κατηγορίας "κρυμμένη" με ένα στυλ εμφάνισης "κανένας" θα έχει ταχύτερη απόδοση από την άμεση επεξεργασία αυτού του στυλ. Εξήγησα μερικά από αυτά αρκετά καλά στην ερώτηση Stack Overflow Γυρίζοντας δύο στοιχεία ορατά / κρυμμένα στο ίδιο div.
Βέλτιστες πρακτικές και βελτιστοποίηση JavaScript
Εδώ είναι ένα πραγματικά διαφωτιστικό βίντεο μιας τεχνολογίας Google Talk από τον μηχανικό front-end της Google, Nicholas Zakas:
Επιταχύνετε το JavaScript σας (YouTube)
|
Ενεργοποιείται το παράδειγμα χρήσης του ορατού ελέγχου για το adblocker:
$ (έγγραφο). ήδη (συνάρτηση () {
if (! $ ("# ablockercheck"). είναι (": ορατό"))
$ ("# ablockermsg"). κείμενο ("Απενεργοποιήστε το adblocker."). εμφάνιση ();
});
Το "ablockercheck" είναι ένα αναγνωριστικό που αποκλείει το adblocker. Επομένως, αν το ελέγξετε αν είναι ορατό, μπορείτε να εντοπίσετε εάν το πρόγραμμα adblocker είναι ενεργοποιημένο
|
Μετά από όλα, κανένα από τα παραδείγματα δεν μου ταιριάζει, γι 'αυτό έγραψα το δικό μου.
Δοκιμές (χωρίς υποστήριξη φίλτρου Internet Explorer: alpha):
α) Ελέγξτε εάν το έγγραφο δεν είναι κρυμμένο
β) Ελέγξτε εάν ένα στοιχείο έχει μηδενικό πλάτος / ύψος / αδιαφάνεια ή οθόνη: κανένα / ορατότητα: κρυμμένο σε ενσωματωμένα στυλ
γ) Ελέγξτε εάν το κέντρο (επίσης επειδή είναι ταχύτερο από τη δοκιμή κάθε εικονοστοιχείου / γωνίας) του στοιχείου δεν κρύβεται από άλλο στοιχείο (και από όλους τους προγόνους, παράδειγμα: υπερχείλιση: κρυφό / κύλιση / ένα στοιχείο πάνω από ένα άλλο) ή άκρες οθόνης
δ) Ελέγξτε εάν ένα στοιχείο έχει μηδενικό πλάτος / ύψος / αδιαφάνεια ή οθόνη: κανένα / ορατότητα: κρυμμένο σε υπολογιστικά στυλ (μεταξύ όλων των προγόνων)
Δοκιμάστηκε στις
Android 4.4 (εγγενές πρόγραμμα περιήγησης / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (λειτουργίες εγγράφων Internet Explorer 5-11 + Internet Explorer 8 σε ένα εικονική μηχανή) και Safari (Windows / Mac / iOS).
var is_visible = (συνάρτηση () {
var x = window.pageXOffset; window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset; window.pageYOffset + window.innerHeight - 1: 0,
σχετικός = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
λειτουργία μέσα (παιδί, γονέας) {
ενώ (παιδί) {
εάν (παιδί === γονέας) επιστρέψει true;
child = child.parentNode;
}
επιστροφή ψευδής?
};
συνάρτηση επιστροφής (elem) {
αν (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == "κρυφό" ||
elem.style.display == "κανένας" ||
elem.style.opacity === 0
) επιστροφή ψευδής
var rect = elem.getBoundingClientRect ();
εάν (σχετικός) {
εάν (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) επιστροφή false
} αλλιώς εάν (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) επιστροφή ψευδής
εάν (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = μηδέν;
ενώ (el) {
if (el === document) {break;} αλλιώς εάν (! el.parentNode) επιστρέψει false;
comp = window.getComputedStyle; window.getComputedStyle (el, null): el.currentStyle;
αν (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) επιστροφή false
el = el.parentNode;
}
}
επιστροφή αληθινή?
}
}) ();
Τρόπος χρήσης:
is_visible (elem) // boolean
|
Πρέπει να ελέγξετε και τα δύο ... Οθόνη καθώς και ορατότητα:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "κρυφό") {
// Το στοιχείο δεν είναι ορατό
} αλλιώς {
// Το στοιχείο είναι ορατό
}
Εάν ελέγξουμε για $ (this) .is (": visible"), το jQuery ελέγχει και τα δύο πράγματα αυτόματα.
|
Ίσως μπορείτε να κάνετε κάτι τέτοιο
$ (έγγραφο). ήδη (συνάρτηση () {
var ορατό =$ ('# tElement'). είναι (': ορατό');
εάν (ορατό) {
προειδοποίηση ("ορατό") ·
// Κωδικός
}
αλλού
{
ειδοποίηση ("κρυφό") ·
}
});
Όνομα
|
Απλώς ελέγξτε την ορατότητα ελέγχοντας μια δυαδική τιμή, όπως:
εάν (this.hidden === false) {
// Ο κωδικός σου
}
Χρησιμοποίησα αυτόν τον κωδικό για κάθε λειτουργία. Διαφορετικά, μπορείτε να χρησιμοποιήσετε είναι (': ορατό') για τον έλεγχο της ορατότητας ενός στοιχείου.
|
Επειδή τα στοιχεία με ορατότητα: κρυφό ή αδιαφάνεια: 0 θεωρούνται ορατά, καθώς εξακολουθούν να καταναλώνουν χώρο στη διάταξη (όπως περιγράφεται για το jQuery: visible Selector) - μπορούμε να ελέγξουμε εάν το στοιχείο είναι πραγματικά ορατό με αυτόν τον τρόπο:
η συνάρτηση isElementReallyHidden (el) {
επιστροφή $ (el) .is (": κρυφό") || $ (el) .css ("ορατότητα") == "κρυφό" || $ (el) .css ('αδιαφάνεια') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl). γονείς (). κάθε (συνάρτηση () {
εάν (isElementReallyHidden (αυτό)) {
booElementReallyShowed = false;
}
});
|
Τι γίνεται όμως αν το CSS του στοιχείου είναι το ακόλουθο;
.στοιχείο{
θέση: απόλυτη, αριστερά: -9999;
}
Έτσι, αυτή η απάντηση στην ερώτηση Stack Overflow Πώς να ελέγξετε εάν ένα στοιχείο είναι εκτός οθόνης θα πρέπει επίσης να ληφθεί υπόψη.
|
Μια συνάρτηση μπορεί να δημιουργηθεί προκειμένου να ελέγξει για ορατότητα / χαρακτηριστικά εμφάνισης προκειμένου να εκτιμηθεί εάν το στοιχείο εμφανίζεται στο περιβάλλον χρήστη ή όχι.
function checkUIElementVisible (στοιχείο) {
επιστροφή ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'κρυφό'));
}
Εργασία Fiddle
|
Επίσης, εδώ είναι μια τριμερής υπό όρους έκφραση για να ελέγξετε την κατάσταση του στοιχείου και στη συνέχεια να το αλλάξετε:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle "). show (" αργό ");});
|
if ($ ('# postcode_div'). είναι (': ορατό')) {
εάν ($ ('# postcode_text'). val () == ") {
$ ('# spanPost'). κείμενο ('\ u00a0');
} αλλιώς {
$ ('# spanPost'). κείμενο ($ ('# postcode_text'). val ());
}
|
1
2
Επόμενο
Πολύ ενεργή ερώτηση. Κερδίστε 10 φήμη για να απαντήσετε σε αυτήν την ερώτηση. Η απαίτηση φήμης συμβάλλει στην προστασία αυτής της ερώτησης από ανεπιθύμητες ενέργειες και μη απαντήσεις.
Δεν είναι η απάντηση που ψάχνετε; Περιηγηθείτε σε άλλες ερωτήσεις με ετικέτα javascript jquery dom visibility ή κάντε τη δική σας ερώτηση.